"use client"

interface HanziDisplayProps {
  char: string
}

export function HanziDisplay({ char }: HanziDisplayProps) {
  // 模拟字根数据
  const mockData = {
    pinyin: 'mù',
    stroke_count: 4,
    radical: '木',
    meaning: '树木，植物的总称。引申为木材、木制品等。',
    shape_characteristics: '象形字，像一棵树的形状，上面是树冠，下面是树根。',
    memory_tips: '记住"木"字就像一棵树，中间一竖是树干，上下两横是树枝和树根。'
  }

  return (
    <div className="w-full h-full bg-gradient-to-br from-red-50 via-purple-50 to-blue-50 flex gap-6 relative overflow-hidden">
      {/* 装饰性背景元素 */}
      <div className="absolute -top-16 -right-16 w-48 h-48 bg-pink-200/30 rounded-full animate-pulse"></div>
      <div className="absolute -bottom-12 -left-12 w-40 h-40 bg-blue-200/30 rounded-full animate-pulse"></div>

      {/* 主字展示区 */}
      <div className="flex-1 flex flex-col items-center justify-center relative z-10">
        <div className="text-center">
          {/* 大字 */}
          <div className="text-[180px] leading-none font-black mb-4 bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 bg-clip-text text-transparent animate-pulse drop-shadow-2xl">
            {char}
          </div>

          {/* 字信息 */}
          <div className="flex gap-4 justify-center text-lg">
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:transform hover:-translate-y-1">
              <span className="text-gray-600">拼音:</span>
              <span className="font-bold bg-gradient-to-r from-purple-500 to-purple-600 bg-clip-text text-transparent">
                {mockData.pinyin}
              </span>
            </div>
            
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:transform hover:-translate-y-1">
              <span className="text-gray-600">笔画:</span>
              <span className="font-bold bg-gradient-to-r from-purple-500 to-purple-600 bg-clip-text text-transparent">
                {mockData.stroke_count}画
              </span>
            </div>
            
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:transform hover:-translate-y-1">
              <span className="text-gray-600">部首:</span>
              <span className="font-bold bg-gradient-to-r from-purple-500 to-purple-600 bg-clip-text text-transparent">
                {mockData.radical}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* 字根详情 */}
      <div className="w-80 bg-gradient-to-br from-purple-500 to-purple-600 rounded-[20px] p-6 text-white shadow-2xl relative overflow-hidden">
        {/* 装饰背景 */}
        <div className="absolute -top-8 -right-8 w-32 h-32 bg-white/10 rounded-full animate-spin"></div>
        
        <div className="relative z-10">
          <div className="mb-4">
            <div className="flex items-center gap-2 text-lg font-bold mb-2 drop-shadow-md">
              <span>📖</span>
              <span>基本含义</span>
            </div>
            <div className="text-sm leading-relaxed bg-white/15 p-3 rounded-xl backdrop-blur-sm">
              {mockData.meaning}
            </div>
          </div>

          <div className="mb-4">
            <div className="flex items-center gap-2 text-lg font-bold mb-2 drop-shadow-md">
              <span>🎨</span>
              <span>字形特征</span>
            </div>
            <div className="text-sm leading-relaxed bg-white/15 p-3 rounded-xl backdrop-blur-sm">
              {mockData.shape_characteristics}
            </div>
          </div>

          <div>
            <div className="flex items-center gap-2 text-lg font-bold mb-2 drop-shadow-md">
              <span>💡</span>
              <span>记忆技巧</span>
            </div>
            <div className="text-sm leading-relaxed bg-white/15 p-3 rounded-xl backdrop-blur-sm">
              {mockData.memory_tips}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
} 